<template>
  <a-form
    ref="formRef"
    :model="formState"
    name="basic"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
    autocomplete="off"
    @finish="onFinished"
    @finishFailed="onFinishFailed"
  >
    <!-- <a-form-item label="采集器参数" name="params" :rules="[{ required: true, message: '请输入' }]">
      <a-select ref="select" placeholder="请选择" v-model:value="formState.params">
        <a-select-option value="a">采集器参数a</a-select-option>
        <a-select-option value="b">采集器参数b</a-select-option>
        <a-select-option value="c">采集器参数c</a-select-option>
      </a-select>
    </a-form-item> -->

    <a-form-item label="初始值1" name="in1">
      <a-input v-model:value="formState.in1" />
    </a-form-item>

    <a-form-item label="预警上限1" name="th1Max">
      <a-input v-model:value="formState.th1Max" />
    </a-form-item>

    <a-form-item label="预警下限1" name="th1Min">
      <a-input v-model:value="formState.th1Min" />
    </a-form-item>

    <a-form-item label="初始值2" name="in2">
      <a-input v-model:value="formState.in2" />
    </a-form-item>

    <a-form-item label="预警上限2" name="th2Max">
      <a-input v-model:value="formState.th2Max" />
    </a-form-item>

    <a-form-item label="预警下限2" name="th2Min">
      <a-input v-model:value="formState.th2Min" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
      <a-button type="primary" html-type="submit">确定</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';

interface FormState {
  in1: number;
  th1Max: number;
  th1Min: number;
  in2: number;
  th2Max: number;
  th2Min: number;
}
export default defineComponent({
  setup(props, { emit }) {
    const formRef = ref();

    const formState = ref<FormState>({
      in1: 0,
      th1Max: 0,
      th1Min: 0,
      in2: 0,
      th2Max: 0,
      th2Min: 0,
    });

    let id;

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    const setForm = (formData) => {
      formRef.value.resetFields();
      id = formData.id;
      formState.value = {
        in1: formData.in1,
        th1Max: formData.th1Max,
        th1Min: formData.th1Min,
        in2: formData.in2,
        th2Max: formData.th2Max,
        th2Min: formData.th2Min,
      };
    };

    const onFinished = (event) => {
      defHttp
        .post({
          url: '/sensor/set-thershold',
          params: {
            id,
            ...formState.value,
          },
        })
        .then((res) => {
          emit('finished', event);
        });
    };

    return {
      formState,
      onFinishFailed,
      setForm,
      formRef,
      onFinished,
    };
  },
});
</script>

